<template>
  <div class="pie-chart-container" :style="styleData">
    <div class="pie-chart-title">{{ title }}</div>
    <div :id="id" :style="{ width: '98%', height: '90%' }"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
interface PropsTypes {
  id: string;
  title: string;
  listData: [];
  styleData: object;
}
const props = withDefaults(defineProps<PropsTypes>(), {
  id: "",
  title: "",
  listData: [],
  styleData: {}
});
onMounted(() => {
  console.log(props, "props");
  initChart();
});
// 初始化图表

const chartColor = [
  "#c065e7",
  "#765deb",
  "#3862d8",
  "#6a89E2",
  "#219CF9",
  "#6efbbf",
  "#40c057",
  "#ffd351",
  "#ff8e43",
  "#f56b6d"
];
const textColor = "#8A8A8A";
let echartData = [
  {
    name: "无学历",
    value: 0
  },
  {
    name: "小学",
    value: 2
  },
  {
    name: "初中",
    value: 0
  },
  {
    name: "高中",
    value: 1
  },
  {
    name: "中专",
    value: 1
  },
  {
    name: "大专",
    value: 1
  },
  {
    name: "本科",
    value: 3
  },
  {
    name: "研究生",
    value: 1
  },
  {
    name: "博士",
    value: 1
  }
];
function initChart() {
  const pieChart = document.getElementById(props.id);
  const chart = echarts.init(pieChart);
  // 配置
  chart.setOption({
    // 提示框
    tooltip: {
      trigger: "item",
      formatter: "数据统计 <br/>{b} : {c} ({d}%)"
    },
    // 图例
    legend: {
      right: 0,
      top: 0,
      itemGap: 10,
      itemWidth: 14,
      orient: "vertical",
      textStyle: { fontSize: 14, color: textColor }
    },
    // 标题
    title: {
      // text: 298,
      top: "42%",
      left: "40%",
      // subtext: "总数",
      itemGap: 5,
      textStyle: {
        color: "#45a0e8",
        fontSize: 24
      },
      subtextStyle: {
        color: "#61bbff",
        fontSize: 20
      },
      textAlign: "center"
    },
    // 颜色
    color: chartColor,
    // 具体图表设置
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: ["30%", "70%"],
        center: ["41%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 0
        },
        data: props.listData,
        label: {
          formatter: function (params) {
            return `{normal|${params.name}：}\r\r\n{value|${params.data.value} (${params.percent})%}`;
          },
          rich: {
            normal: {
              color: textColor,
              fontSize: 12,
              align: "left"
            },
            value: {
              fontSize: 12,
              color: textColor,
              fontWeight: 600,
              padding: [5, 0, 0, 0]
            }
          }
        }
      }
    ]
  });
}
</script>

<style lang="less" scoped>
.pie-chart-container {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 8px;
  align-items: flex-start;
  flex-direction: column;

  // width: 49.8%;
  // height: 350px;
  .pie-chart-title {
    font-size: 13px;
    color: #666;
    font-weight: 700;
  }
  #pie-chart {
    // border: 1px solid #000;
    margin-top: 10px;
  }
}
</style>
